<template>
  <div class="App">
    <input type="text" v-model="msg" />
    <input type="text" v-bind:value="msg2" v-on:input="c" />
    <button @click="change">修改数据</button>
    {{ msg }} - {{ msg2 }}
<hr>
    <!-- 华丽的分割线 以下是select 针对v-model的详解 -->
    <!-- <SonCon :citys="citys" :defaultVal="defaultVal" v-on:changeCity="changeFn"></SonCon>
    父组件中展示子组件中选中的值{{ defaultVal }} -->

    <!-- 下面是使用 v-model 简化以上代码 -->
        <SonCon :citys="citys" v-model="selectVal"></SonCon>
    父组件中展示子组件中选中的值{{ selectVal }}
<hr>
    <!-- 测试一个input -->
     <InputSon v-model="inputVal"></InputSon>
     父组件中监听到的 子组件中input 框中的值 {{ inputVal }}
  </div>
</template>

<script>
import InputSon from "./components/InputSon.vue";
import SonCon from "./components/SonCon.vue";
export default {
  // v-model 应用在输入框上的 原理  就是 v-bind:value + v-on:input
  data() {
    return {
      msg: "",
      msg2: "",
      citys: [
        {
          id: "1",
          name: "北京",
        },
        { id: "2", name: "新疆" },
        { id: "3", name: "上海" },
      ],
      selectVal:"2",
      inputVal:''
    };
  },
  methods: {
    change() {
      (this.msg = "新数据"), (this.msg2 = "新数据2");
    },
    c(e) {
      console.log(e);
      this.msg2 = e.target.value;
    },
    changeFn(e){
      console.log("父组件中接收到的值", e.target.value)
      this.selectVal = e.target.value
    }
  },
  components: {
    SonCon,
    InputSon
  },
};
</script>

<style>
.App {
  width: 500px;
  height: 500px;
  background-color: pink;
}
</style>